const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack')

const resolve = (dir) => path.resolve(__dirname, '../', dir)

const useLoader = (type) => [
  { loader: MiniCssExtractPlugin.loader }, // style-loader
  { loader: 'css-loader' },
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          [
            'autoprefixer', // 自动补齐前缀 - 样式的兼容性写法
            {
              overrideBrowserslist: ['last 100 versions']
            }
          ],
          [
            'postcss-preset-env'
          ]
        ]
      }
    }
  },
  { loader: type }
]
const isDEV = process.env.NODE_ENV === 'development'
module.exports = {
  mode: isDEV ? 'development' : 'production',
  entry: {
    app: resolve('src/index.js')
  },
  output: {
    publicPath: '/',
    path: resolve('dist/'),
    filename: isDEV ? 'js/[name].js' : 'js/[name].[hash:8].js'
  },
  plugins: [
    new CleanWebpackPlugin(),

    new CopyWebpackPlugin({
      patterns: [
        {
          context: resolve('public/'), // 一定要添加上下文对象，否则直接复制public目录至dist
          from: '**/*',
          to: resolve('dist/'),
          globOptions: {
            ignore: ['index.html']
          }
        }
      ]
    }),

    new HtmlWebpackPlugin({
      title: 'hello react',
      template: resolve('public/index.html'),
      filename: 'index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeAttributeQuotes: true
      }
    }),
    new webpack.HotModuleReplacementPlugin()  // 热更新插件
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader', 
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: 3,
                  targets: {
                    chrome: "58",
                    ie: "11"
                  }
                }
              ],
              "@babel/preset-react"
            ],
            plugins: [
              '@babel/plugin-transform-runtime',
              [
                '@babel/plugin-proposal-decorators',
                { "legacy": true }
              ],
              '@babel/plugin-proposal-class-properties'
            ]
          }
        }
      },
      {
        test: /\.(css|scss)$/,
        use: useLoader('sass-loader')
      },
      {
        test: /\.(png|jpg|jpeg|gif|webp|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024 * 3,
              name: 'img/[contenthash].[ext]'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    contentBase: resolve('dist/'),
    inline: true,
    // hot: true
  }
}